<template>
  <CDialog
    :visible="visible"
    title="修改手机号码"
    width="630px"
    @submit="handleSubmit"
    @cancel="handleCancel"
    @outerOpen="outerOpen"
  >
    <i-form :items="items" :model="form" :rules="rules" ref="form">
      <template v-if="step == 0" slot="staticMobile">
        <el-form-item label="手机号">
          {{ form.mobile }}
        </el-form-item>
      </template>
      <template slot="imgCode">
        <el-form-item label="图形验证码" prop="imgCode">
          <div class="autcode-content mobile-dialog-autcode_content">
            <el-input v-model="form.imgCode" class="authCode" :maxlength="4" />
            <div class="login-right_code mobile-dialog-autcode_content_right">
              <img class="code" :src="authCodeSrc" />
              <span class="create-code" @click="createCode">换一张</span>
            </div>
          </div>
        </el-form-item>
      </template>
      <template slot="code">
        <el-form-item label="验证码" prop="code">
          <div class="autcode-content mobile-dialog-autcode_content">
            <el-input class="authCode" v-model="form.code" />
            <div class="mobile-dialog-autcode_button">
              <HycTimerButton
                :user-mobile="form.mobile"
                :user-validation-code="form.imgCode"
                :convert-code-params="convertParams"
                :key="buttonkey"
                @changeValidationCode="createCode"
              />
            </div>
          </div>
        </el-form-item>
      </template>
    </i-form>
    <template v-if="step === 0" slot="outerFooter">
      <div>
        <el-button type="warning" @click="handleStepCancel">取消</el-button>
        <el-button type="success" @click="handlePushStep">下一步</el-button>
      </div>
    </template>
    <template v-if="step === 1" slot="outerFooter">
      <div>
        <el-button type="warning" @click="handleStepCancel">取消</el-button>
        <el-button type="success" @click="handleSubmit">确认</el-button>
      </div>
    </template>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import HycTimerButton from '@/components/hycTimerButton'
import { checkOldPhone, updateMyPhone } from '@/api/mySelf'

export default {
  name: 'MobileDialog',
  components: { CDialog, HycTimerButton },
  data() {
    return {
      step: 0,
      buttonkey: 1,
      convertParams: [
        {
          value: 'mobile',
          parseParams: 'userMobile',
        },
        {
          value: 'imgCode',
          parseParams: 'userValidationCode',
        },
      ],
      items: [
        {
          label: '新手机号',
          type: 'text',
          value: 'mobile',
          required: true,
          clearable: true,
          hidden: true,
        },
        {
          slot: 'staticMobile',
        },
        {
          slot: 'imgCode',
        },
        {
          slot: 'code',
        },
      ],
      form: {
        imgCode: '',
        mobile: '',
      },
      rules: {
        imgCode: [{ required: true, message: '请输入图形验证码' }],
        code: [{ required: true, message: '请输入验证码' }],
        mobile: [{ required: true, message: '请输入新手机号' }],
      },
      time: '',
      authCodeSrc: '',
    }
  },
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
    visible: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {},
  methods: {
    handlePushStep() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (this.step !== 0) return
        checkOldPhone({
          code: this.form.code,
          mobile: this.form.mobile,
        }).then((res) => {
          if (res) {
            this.step = 1
            this.form = {
              mobile: '',
              imgCode: '',
            }

            this.buttonkey += 1

            this.createCode()

            this.$nextTick(() => {
              this.$refs.form.clearValidate()
            })

            this.$set(this.items, 0, {
              ...this.items[0],
              hidden: false,
            })
          } else {
            this.$message({
              type: 'error',
              message: '验证错误，请稍后重试',
              showClose: true,
            })
          }
        })
      })
    },
    handleStepCancel() {
      this.$emit('update:visible', false)
      this.step = 0
    },
    createCode() {
      this.time = new Date().getTime()
      const authCodeApi =
        process.env.VUE_APP_BASE_URL_API +
        '/open/getSystemUserLoginCerificationImg'
      this.authCodeSrc = `${authCodeApi}?uuid=${this.time}`
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return

        updateMyPhone({
          mobile: this.form.mobile,
          code: this.form.code,
        }).then(() => {
          this.$message({
            type: 'success',
            showClose: 'true',
            message: '修改成功！',
          })

          this.$emit('update:visible', false)
          this.$emit('refresh')
        })
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    outerOpen() {
      this.step = 0
      this.form = {
        mobile: this.userInfo.mobile,
        imgCode: '',
      }

      this.$set(this.items, 0, {
        ...this.items[0],
        hidden: true,
      })

      this.$nextTick(() => {
        this.createCode()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.mobile-dialog-autcode_content {
  display: flex;

  .mobile-dialog-autcode_content_right {
    padding-left: 20px;
    display: flex;
    width: 300px;
  }

  .create-code {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.mobile-dialog-autcode_button {
  .el-button {
    margin-left: 20px;
    height: 40px;
  }
}

.authCode {
  .el-input__inner {
    width: 200px;
  }
  width: 200px;
}
</style>
